<!--
 * @Description: Overlay 详情页
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-10-21 16:18:38
 * @LastEditTime: 2021-10-22 14:48:50
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <table class="overlay-info">
    <template v-if="row.type === 'Hub'">
      <tr v-for="it in row.hubSites" :key="it.siteId">
        <template v-if="it.type === 'main'">
          <td>主中心点ID：{{it.siteId}}</td>
          <td>{{it.siteName}}</td>
        </template>
        <template v-else>
          <td>备中心点ID：{{it.siteId}}</td>
          <td>{{it.siteName}}</td>
        </template>
      </tr>
      <tr v-for="(item, index) in row.fullSites" :key="index">
        <td>分支站点ID：{{item.siteId}}</td>
        <td>{{item.siteName}}</td>
      </tr>
    </template>
    <template v-else>
      <tr v-for="(item, index) in row.fullSites" :key="index">
        <td>分支站点ID：{{item.siteId}}</td>
        <td>{{item.siteName}}</td>
      </tr>
    </template>
  </table>
</template>

<script>
export default {
  props: ['row']
};
</script>

<style lang="scss" scoped>
.overlay-info {
  width: 100%;
  border: 1px solid #ebeef5;
  tr {
    width: 100%;
    td {
      padding: 5px 15px;
      line-height: 30px;
      &:first-child {
        width: 150px;
        text-align: center;
        background: #f8f8f9;
      }
      &:last-child {
        width: calc(100% - 200px);
      }
    }
  }
}
</style>